<template>
  <div id="app">
    <div id="chart" style="width: 100%; height: 400px;"></div>
    <ul v-if="showList">
      <li v-for="(node, index) in nodeTexts" :key="index">
        <input v-model="nodeTexts[index]" @input="updateSingleNodeText(index)">
      </li>
    </ul>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  name: 'App',
  props: {
    orderNode: {
      type: Array,
      default: () => ['节点 1', '节点 2', '节点 3', '节点 4', '节点 5', '节点 6', '节点 7', '节点 8']
    },
    showList: {
      type: Boolean,
      default: true
    }

  },
  data() {
    return {
      nodeTexts: ['节点 1', '节点 2', '节点 3', '节点 4', '节点 5', '节点 6', '节点 7', '节点 8'],
      chart: null,
      option: {
        tooltip: {},
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: [80, 40],
            roam: true,
            label: {
              show: true,
              color: 'black'
            },
            edgeSymbol: ['none', 'arrow'],
            itemStyle: {
              color: 'white',
              borderColor: 'black',
              borderWidth: 1
            },
            data: [
              { name: '节点 1', x: 100, y: 100 },
              { name: '节点 2', x: 250, y: 100 },
              { name: '节点 3', x: 400, y: 100 },
              { name: '节点 4', x: 550, y: 100 },
              { name: '节点 5', x: 100, y: 300 },
              { name: '节点 6', x: 250, y: 300 },
              { name: '节点 7', x: 400, y: 300 },
              { name: '节点 8', x: 550, y: 300 }
            ],
            links: [
              { source: 0, target: 1 },
              { source: 1, target: 2 },
              { source: 2, target: 3 },
              { source: 4, target: 5 },
              { source: 5, target: 6 },
              { source: 6, target: 7 },
              { source: 3, target: 4 }
            ]
          }
        ]
      }
    };
  },
  mounted() {
    this.nodeTexts = this.orderNode;
    this.option.series[0].data.forEach((item, index) => {
      item.name = this.nodeTexts[index];
    });
    this.chart = echarts.init(document.getElementById('chart'));
    this.chart.setOption(this.option);
  },
  methods: {
    updateSingleNodeText(index) {
      this.option.series[0].data[index].name = this.nodeTexts[index];
      this.$emit('orderNode', this.nodeTexts);
      this.chart.setOption(this.option);
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
